﻿<head>
    <script src="~/lib/vue/dist/vue.global.js"></script>
    <link href="~/lib/element-plus/dist/index.css" rel="stylesheet" />
    <script src="~/lib/element-plus/dist/index.full.js"></script>
    <script src="~/lib/axios/dist/axios.js"></script>
    <link href="~/css/table.css" rel="stylesheet" />
</head>
<div id="app">
    <table width="100%">
        <tr>
            <td>
                <p color="black">您正在做的业务是:人力资源管理--薪酬标准管理--薪酬标准登记查询</p>
            </td>
        </tr>
        <tr>
            <td>
                &nbsp;  
            </td>
        </tr>
        <tr>
            <td>
                符合条件的薪酬标准总数:  {{rows}}  例
            </td>
        </tr>
    </table>

    <el-table :data="tableData" :header-cell-style="{background:'#FFDB6F',color:'#606266'}">
        <el-table-column prop="standardId" label="薪酬标准编号"></el-table-column>
        <el-table-column prop="standardName" label="薪酬标准名称"></el-table-column>
        <el-table-column prop="designer" label="制定人"></el-table-column>
        <el-table-column prop="registTime" label="登记时间" :formatter="formatDate"></el-table-column>
        <el-table-column prop="salarySum" label="薪酬总额">
            <template #default="scope">
                {{ formattedTotalSalarySum(scope.row.salarySum) }}
            </template>
        </el-table-column>
    </el-table>
    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                   :page-sizes="[5, 10, 15, 20]" layout="total, sizes, prev, pager, next, jumper" :total="rows"
                   v-on:size-change="handleSizeChange" v-on:current-change="handleCurrentChange">

    </el-pagination>
</div>

<script>
    var { createApp, reactive, ref } = Vue
    var app = createApp({
        setup() {
            const rows = ref(0);
            const currentPage = ref(1);
            const pageSize = ref(2);
            const isUse = ref(false);
            let tableData = ref([])

            const urlParams = new URLSearchParams(window.location.search);
            const rowData = JSON.parse(urlParams.get('ss'));

            const fetchData = () => {
                axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded";
                axios.post('/TJFYSS', {
                    StandardId: rowData.standardId,
                    gzc: rowData.gzc,
                    startDate: rowData.startDate,
                    endDate: rowData.endDate,
                    page: currentPage.value,
                    pageSize: pageSize.value,
                    ChangeStatus:""
                })
                    .then(res => {
                        tableData.value = res.data.ss;
                        rows.value = res.data.totalRecords;
                        console.log(res.data.ss)
                    })
            };

            // 处理每页显示数量变化
            const handleSizeChange = (size) => {
                pageSize.value = size;
                fetchData();
                isUse.value = true;
            };
            // 格式化日期
            const formatDate = (row) => {
                if (row) {
                    const date = new Date(row.registTime);
                    return `${date.getFullYear()}年${(date.getMonth() + 1).toString().padStart(2, '0')}月${date.getDate().toString().padStart(2, '0')}日`;
                }
                return '';
            };
            //格式化金额
            function formattedTotalSalarySum(num) {
                return new Intl.NumberFormat('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(num);
            }
            // 处理当前页变化
            const handleCurrentChange = (cpage) => {
                currentPage.value = cpage;
                fetchData();
                isUse.value = true;
            };
           
            fetchData();
            return {
                tableData,
                currentPage,
                pageSize,
                rows,
                isUse,
                handleSizeChange,
                handleCurrentChange,
                formattedTotalSalarySum,
                formatDate
            }
        }
    })
    app.use(ElementPlus)
    app.mount("#app");

</script>
<style type="text/css">
    body {
        background-color: #FFFFBB;
        border: 1px solid #FFDB6F;
        display: block;
        margin: 8px;
    }

</style>



